// web/src/app/(protected)/_components/navbar.tsx (不可复用的放在非公共components)
'use client';
import React from 'react';
import Link from 'next/link';
import {Button} from '@/components/ui/button'
import {usePathname} from "next/navigation";
import UserButton from "@/components/auth/user-button";

const Navbar = () => {
    const pathname = usePathname()

    return (
        <div className={`bg-secondary flex justify-between items-center p-4 rounded-xl
                                        w-[600px] shadow-sm`}>
            <div className={`flex gap-x-2`}>
                <Button asChild
                        variant={pathname === '/server' ? 'default' : 'outline'}>
                    <Link href={`/server`}>
                        Server
                    </Link>
                </Button>
                <Button asChild
                        variant={pathname === '/client' ? 'default' : 'outline'}>
                    <Link href={`/client`}>
                        Client
                    </Link>
                </Button>
                <Button asChild
                        variant={pathname === '/admin' ? 'default' : 'outline'}>
                    <Link href={`/admin`}>
                        Admin
                    </Link>
                </Button>
                <Button asChild
                        variant={pathname === '/settings' ? 'default' : 'outline'}>
                    <Link href={`/settings`}>
                        Settings
                    </Link>
                </Button>
            </div>
            <UserButton/>
        </div>
    );
};

export default Navbar;